<style lang='scss' scoped>
@import '@/assets/css/index';
.game2 {
	@include page();
	.wrapper{
		display: flex;
    flex-direction: column;
    flex:1;
    .text{
      text-align: center;
      font-size: 15px;
      font-weight: bold;
    }
		.contentBox{
			@include contentBox();
      .master_pic{
        position: absolute;
				width: 300px !important;
				height: 300px !important;
      }
		}
	}
}

</style>
<template>
  <div class="game2" ref="game">
		<div class="wrapper">
			<myheader :passInfo="passInfo"></myheader>
      <div class="text" @click="pass">找到最深的颜色</div>
			<div class="contentBox" ref="contentBox">
        <img class="master_pic" ref="master_pic" :style="{left: marginLeft + 'px', top: marginTop + 'px'}"
					src="../../../assets/img/g2/master_pic.png">
			</div>
		</div>
  </div>
</template>

<script>
import myheader from './header2.vue'
import {mapState} from 'vuex'
export default {
  name: 'game2',
  components: {
		myheader
  },
  data() {
    return {
      coordinate:{
        targetScope: {}
      },
      marginLeft: 10,
      marginTop: 10,
      passInfo:{}
    }
  },
  created () {
    this.$store.commit("setIsPass",false)
    //在页面链接中获取到当前是第几关
    const ji = this.$route.query.ji
    this.passInfo = {
      ji:ji,
      text: '',
      tip: '图中标题的黑色为最深的颜色'
    }
    document.title = `第${ji}关`
  },
  computed: {
    ...mapState(['fivepass'])
  },
  mounted() {
    
    // contentBox 的clientY
    const contentBox = this.$refs["contentBox"]
    console.log("contentBox.clientHeight",contentBox.clientHeight)

    const element = this.$refs["master_pic"]
    // master_pic 宽高
    const width = element.clientWidth
    const height = element.clientHeight
    console.log(width,height)
    // 屏幕宽度
    const screenWidth = window.screen.width
    const contentHeight = contentBox.clientHeight
    console.log('screenWidth',screenWidth)
    const marginLeft = (screenWidth - width)/2
    console.log('marginLeft',marginLeft)
    const marginTop = (contentHeight - height)/2
    // 实现水平居中
    this.marginLeft = marginLeft
    // 实现垂直居中
    this.marginTop = marginTop

    const oneWidth = element.getBoundingClientRect().width/6
    this.coordinate.targetScope.x = [oneWidth,oneWidth*2]
    const oneHeight = element.getBoundingClientRect().height/5
	  this.coordinate.targetScope.y = [oneHeight*2,oneHeight*3]
  },
  methods: {
	  // clickMasterPic(e) {
    //   console.log(e.layerX,e.layerY)
    //     if(e.layerX>=this.coordinate.targetScope.x[0]&&e.layerX<=this.coordinate.targetScope.x[1]){
    //       if(e.layerY>=this.coordinate.targetScope.y[0]&&e.layerY<=this.coordinate.targetScope.y[1]){
    //         // 通过关卡
    //         this.$store.commit("setIsPass",true)
    //         console.log("isPass",this.$store.state.isPass)
    //       }  
    //     }
    // }
    pass() {
      this.$store.commit("setIsPass",true)
    }
	}
}
</script>
